<template>
  <div class="margin-top">
    <!-- 自习室信息表格 -->
    <el-table :data="reservations" style="width: 100%">
      <el-table-column prop="id" label="自习室id"></el-table-column>
      <el-table-column prop="roomName" label="自习室名称"></el-table-column>
      <el-table-column prop="capacity" label="自习室容量"></el-table-column>
      <el-table-column prop="facilities" label="自习室设施"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      reservations: [] // 存储自习室信息的数组
    }
  },
  async created() {
    // 组件创建时获取自习室信息
    const username = localStorage.getItem('rname'); // 从本地存储中获取用户名
    if (username) {
      try {
        // 向后端发送请求，获取该管理员负责的自习室信息
        const response = await axios.get(`/api/studyroomadmin/myroom?rname=${username}`);
        this.reservations = response.data; // 将获取到的数据赋值给reservations
      } catch (error) {
        console.error('Error fetching rooms:', error); // 输出错误信息到控制台
      }
    }
  }
}
</script>

<style scoped>
.margin-top {
  margin-top: 1px;
}
</style>
